<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
    <link rel="stylesheet" type="text/css" href="../../css/vant_new.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/local.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant_new.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>

    <style>
        .h {
            background: #cd1b21;
            color: #fff;
            padding: 20px 0 20px 30px;
        }

        .address {
            overflow: hidden;
            border-radius: 8px;
            padding: 10px 0 0 10px;
            background: #fff;
            margin-bottom: 10px;
        }

        .a-c {
            float: left;
            width: 50px;
            height: 80px;
            line-height: 70px;
            text-align: center;
        }

        .a-c img {
            width: 28px;
            text-align: center;
        }

        .a-i {
            float: left;
            width: calc(100% - 50px);
        }

        .pl {
            margin-top: 10px;
            background: #fff;
            padding: 15px 0 10px 0;
        }

        .row {
            position: relative;
            margin-bottom: 10px;
        }

        .row .img {
            width: 100px;
            height: 80px;
            border-radius: 4px;
            overflow: hidden;
            /* padding: 0 10px; */
            margin-left: 10px;
        }

        .row .img img {
            width: 100%;
            height: 100%;
        }

        .row .desc {
            padding-right: 5px;
            padding-left: 10px;
        }

        .row .desc .title {
            font-size: 14px;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .row .desc .title .hot {
            color: #fff;
            background: #cd1b21;
            font-size: 12px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .row .desc .sub-title {
            font-size: 12px;
            color: #969799;
            line-height: 20px;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .row .desc .sub-title * {
            vertical-align: middle;
        }

        .sku {
            padding: 3px 0;
            font-size: 13px;
            color: #9e9e9e;
        }

        .price {
            text-align: right;
            font-size: 14px;
            padding-right: 15px;
            line-height: initial;
        }

        .pl .van-cell__value {
            text-align: right;
            color: #9e9e9e;
        }

        .pl .van-cell {
            padding: 2px 16px;
        }

        .pl .van-field__label,
        .pl .van-cell__title {
            font-weight: 500;
            color: #9e9e9e;
        }

        .dd {
            padding: 0 15px 20px 15px;
            font-size: 14px;
        }

        .di {
            padding: 10px 0 10px 0;
        }

        .di .van-cell__value {
            text-align: left;
        }

        .f .van-cell__title {
            font-size: 14px;
            color: #000;
        }

        .f .van-cell__value {
            font-size: 14px;
            color: #000;
        }

        .s.van-cell {
            padding: 10px 16px;
            background-color: #f9f9f9;
        }

        .s .van-cell__title {
            font-size: 14px;
            color: #000;
        }

        .s .van-cell__value {
            font-size: 15px;
            color: #cd1b21;
        }

        .l {
            display: inline-block;
            height: 16px;
            width: 2px;
            background: #cd1b21;
            vertical-align: text-top;
            margin-right: 5px;
        }

        .pd-b {
            padding: 10px;
            text-align: right;
        }

        .bottom_ {
            height: 50px;
            background: #f9f9f9;
        }

        .bottom_ button {
            margin-left: 10px;
        }

        .van-count-down {
            color: #fff;
            font-size: 12px;
            display: inline;
        }

        .s-i {
            overflow: hidden;
        }

        .s-i img {
            height: 80px;
        }

        .s-t {
            position: relative;
            height: 80px;
        }

        .s-t>div {
            position: absolute;
            top: 50%;
            -webkkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }

        .red .van-action-sheet__subname {
            color: #cd1b21;
        }
        .g{
			font-size: 13px;
			color: #ed6a0c;
            /* padding-bottom: 10px; */
            padding: 0 10px 10px 10px;
		}
    </style>


</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="订单详情" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click.stop="printBill">
                        <img src="../../image/print.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content" v-show="orderData">
                    <div class="h">
                        <van-row>
                            <van-col span="14">
                                <div class="s-t">
                                    <div v-if="orderData.OrderStatus == 1">
                                        <div>等待买家付款</div>
                                        <div style="font-size:12px;">剩<van-count-down :time="getColseDay()"
                                                format="DD 天 HH 时 mm 分"></van-count-down>自动关闭</div>
                                    </div>
                                    <div v-if="orderData.OrderStatus == 2">买家已付款</div>
                                    <div v-if="orderData.OrderStatus == 3">等待仓库发货</div>
                                    <div v-if="orderData.OrderStatus == 4 && orderData.CloseReason != '订单已退款完成'">交易关闭
                                    </div>
                                    <div v-if="orderData.OrderStatus == 5">交易完成</div>

                                    <div v-if="orderData.OrderStatus == 6">退款中</div>
                                    <div v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'">
                                        <div>退款成功</div>
                                        <div style="font-size:12px;">
                                            {{orderData.UpdateDate.split('.')[0].replace(/T/,' ')}}</div>
                                    </div>
                                    <div v-if="orderData.OrderStatus == 18">退款失败</div>
                                </div>
                            </van-col>
                            <van-col span="10">
                                <div class="s-i">
                                    <img src="../../image/ddmjfk.png" v-if="orderData.OrderStatus == 1" />
                                    <img src="../../image/mjyfk.png" v-if="orderData.OrderStatus == 2" />
                                    <img src="../../image/ddckfh.png" v-if="orderData.OrderStatus == 3" />
                                    <img src="../../image/jyygb.png" v-if="orderData.OrderStatus == 4" />
                                    <img src="../../image/jywc.png" v-if="orderData.OrderStatus == 5" />
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                    <div class="address">
                        <div class="a-c">
                            <img src="../../image/shdz.png" />
                        </div>
                        <div class="a-i">
                            <van-cell center>
                                <div>{{orderData.ShipTo}}&nbsp;&nbsp;{{orderData.TelPhone}}</div>
                                <div style="color: #9e9e9e;">{{orderData.Address}}</div>
                            </van-cell>
                        </div>
                    </div>
                    <div class="pl" style="padding-bottom: 0;">
                        <div class="row flex-box" v-for="item in orderData.node">
                            <div class="img">
                                <img
                                    v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
                            </div>
                            <div class="flex-main desc">
                                <div class="title">{{item.ProductName}}</div>
                                <div class="sku">{{item.SKU}}</div>
                            </div>
                            <div class="price">
                                <div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span></div>
                                <div style="color:#9e9e9e">x{{item.ShipmentQuantity}}</div>
                            </div>
                        </div>
                        <div class="g" v-if="gifts.length">礼品清单</div>
                        <div class="row flex-box" v-for="item in gifts">
                            <div class="img">
                                <img
                                    v-lazy="shoppingMallServerIP + item.ThumbnailsUrl" />
                            </div>
                            <div class="flex-main desc">
                                <div class="title">{{item.GiftName}}</div>
                                <!-- <div class="sku">{{item.SKU}}</div> -->
                            </div>
                            <div class="price">
                                <!-- <div>￥&nbsp;<span style="font-size: 15px;">{{item.ItemListPrice}}</span></div> -->
                                <div style="color:#9e9e9e">x{{item.Quantity}}</div>
                            </div>
                        </div>

                        <div>
                            <van-cell-group :border="false">
                                <van-cell title="商品总价" :border="false" :value="'￥' + orderData.Amount"></van-cell>
                                <van-cell title="运费" :border="false"
                                    :value="orderData.Freight == 0?'包邮':'￥' + orderData.Freight">
                                </van-cell>
                                <van-cell class="f" title="订单总价" :border="false"
                                    :value="'￥' + (orderData.Amount+orderData.Freight)">
                                </van-cell>
                                <van-cell class="s" title="实付款" :border="false" :value="'￥' + orderData.OrderTotal">
                                </van-cell>
                                <van-cell class="s" title="退款金额" :border="false"
                                    v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'"
                                    :value="'￥' + orderData.RefundAmount">
                                </van-cell>
                                <van-cell class="s" title="订单备注" :border="false" :value="orderData.Remark">
                                </van-cell>
                                <van-cell class="s" title="商家备注" :border="false"
                                    v-if="orderData.OrderStatus == 4 && orderData.CloseReason == '订单已退款完成'"
                                    :value="orderData.RefundRemark">
                                </van-cell>
                            </van-cell-group>
                        </div>
                    </div>
                    <div class="pl di">
                        <div class="dd"><span class="l"></span> 订单信息</div>
                        <div>
                            <van-cell-group :border="false">
                                <van-cell title="积分" :border="false" :value="'获得' + orderData.OrderPoint + '点积分'"
                                    v-if="(orderData.OrderStatus == 4 && orderData.CloseReason != '订单已退款完成') || (orderData.OrderStatus != 4 && orderData.OrderStatus != 6)">
                                </van-cell>
                                <van-cell title="订单编号" :border="false" :value="orderData.OrderId"></van-cell>
                                <van-cell title="付款方式" :border="false" :value="orderData.PaymentType"
                                    v-if="orderData.PaymentType"></van-cell>
                                <van-cell title="创建时间" :border="false" :value="getDate(orderData.OrderDate)"></van-cell>
                                <van-cell title="付款时间" :border="false" :value="getDate(orderData.PayDate)"
                                    v-if="orderData.PayDate"></van-cell>
                                <van-cell title="发货时间" :border="false" :value="getDate(orderData.ShippingDate)"
                                    v-if="orderData.ShippingDate"></van-cell>
                                <van-cell title="成交时间" :border="false" :value="getDate(orderData.FinishDate)"
                                    v-if="orderData.FinishDate"></van-cell>
                            </van-cell-group>
                        </div>
                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var userInfo = FLD.getUserInfo();

        var OrderId = api.pageParam.OrderId;

        var aliPayPlus = api.require('aliPayPlus');
        var wxPay = api.require('wxPay');

        Vue.use(vant.Lazyload, {
			loading: '../../image/no.png',
			error: '../../image/no.png'
		});



        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                showRefund: false,
                showPageType: false,
                serverIP: 'http://' + FLD.serverIP,
                pageTypes: [{
                    name: '支付宝'
                }, {
                    name: '微信'
                }, {
                    name: '余额支付',
                    subname: '',
                    className: ''
                }],
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                orderData: '',
                refundData: {
                    remark: '',
                    refundReason: ''
                },
                closeDay: 0,
                gifts:[]
            },
            created: function () {
                var that = this;
                that.getBaseColseDay();
                that.getOrderData();
            },
            methods: {
                getBaseColseDay() {
                    var that = this;
                    FLD.ajax('sp_getParams', { key: 'CloseOrderDays' }, function (res) {
                        that.closeDay = parseInt(res.ds[0].Value);
                    })
                },
                getColseDay() {
                    var that = this;
                    if (that.closeDay && that.orderData) {
                        var time = that.closeDay * 24 * 60 * 60 * 1000 - (new Date().getTime() - new Date(that.orderData.OrderDate).getTime());
                        return time;
                    } else {
                        return 0;
                    }
                },
                getOrderData() {
                    var that = this;
                    that.showLoading = true;
                    FLD.ajax('sp_getOrderDetail', { orderId: OrderId }, function (res) {
                        that.showLoading = false;
                        res.ds[0].node = res.ds1;
                        that.orderData = res.ds[0];
                        that.gifts = res.ds2;
                    })
                },
                getDate(d) {
                    if (d) {
                        return d.split('.')[0].replace('T', ' ');
                    }

                },
                printBill(){
                    var that = this;
                    api.openWin({
                        name: 'shoppingPrint',
                        url: 'shoppingPrint.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            OrderId: OrderId
                        }
                    })

                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>